<template>
  <div class="wrap">
    <ul class="head-tab">
      <li :class="{'tab-acitve': tabIndex === 1}" @click="changeTab(1)">商城订单</li>
      <li :class="{'tab-acitve': tabIndex === 2}" @click="changeTab(2)">跑腿订单</li>
    </ul>
    <van-tabs v-if="tabIndex === 1" swipeable @change="tabChange" :swipe-threshold="5" :active="activeIndex">
      <van-tab v-for="item in orderStatusOptions" :key="item.key" :title="item.name">
        <scroll-view scroll-y :style="{height: scrollHeight}" @scrolltolower="scrollBottom">
          <!-- 商城订单 -->
          <ul>
            <li
              class="commodity"
              v-for="(info, rr) in orderList"
              :key="info.orderId"
            >
              <div @click="routerTo(info.orderId)">
              <div class="status">{{info.statusName}}</div>
              <div class="content" v-for="(val,ind) in info.productList" :key="ind">
                <van-row>
                  <van-col span="8">
                    <img :src="val.frontPicUrl" />
                  </van-col>
                  <van-col span="16" class="left">
                    <div class="title van-multi-ellipsis--l2">{{val.productName}}</div>
                    <div class="mt15 desc">{{val.colorName}}</div>
                    <div class="flex mt10 flex-between">
                      <div class="price">￥{{val.price}}</div>
                      <div class="num">X{{val.buyNums}}</div>
                    </div>
                  </van-col>
                </van-row>
              </div>
              <div class="total flex flex-between mt15 flex-middle">
                <div class="piece">共{{info.orderCount}}件商品</div>
                <div>
                  <span class="heji">合计</span>
                  <span class="price">￥{{info.totalAmt}}</span>
                </div>
              </div>
              </div>
              <div class="btns mt15">
                <button
                  class="detail"
                  v-if="info.orderStatus == 0||info.orderStatus == 1||info.orderStatus == 2"
                  @click.stop="routerTo(info.orderId)"
                >查看详情</button>
                <button class="pay" v-if="info.orderStatus == 3 || info.isAfterSale ==1" open-type="contact">联系商家</button>
                <button class="pay" v-if="info.orderStatus == 3" @click.stop="deleteOrder(info.orderId)">删除订单</button>
                <button
                  class="pay"
                  v-if="info.orderStatus == 2"
                  @click.stop="upDateFinishTime(info.orderId)"
                >确认收货</button>
                <button class="pay" v-if="info.orderStatus == 0" @click.stop="goPay(info)">去支付</button>
              </div>
            </li>
          </ul>
        </scroll-view>
      </van-tab>
    </van-tabs>
    <van-tabs v-else swipeable @change="tabChange" :swipe-threshold="5" :active="activeIndex">
      <van-tab v-for="item in orderStatusOptions" :key="item.key" :title="item.name">
        <scroll-view scroll-y :style="{height: scrollHeight}" @scrolltolower="scrollBottom">
          <ul class="list">
            <li class="list-item" v-for="(info, i) in shopList" :key="info.name">
              <div class="list-item__info" @click="goTaskDetail(info)">
                <image class="item__info-photo" :src="info.headImgUrl" />
                <div class="item__info-order">
                  <div class="item__info-order__name">{{info.taskName}}</div>
                  <div class="item__info-order__price">
                    报酬：
                    <span>+{{info.orderAmt}}元</span>
                  </div>
                </div>
                <div class="item__info-status">{{info.orderStatus === 5 ? '已完成' : '进行中'}}</div>
              </div>
              <div class="list-item__time">
                <van-icon name="clock-o" />
                下单时间：{{info.orderTime}}
              </div>
              <div class="list-item__option">
                <van-button
                  class="list-item__option-btn"
                  v-if="info.orderStatus == 3"
                  plain
                  type="info"
                  size="small"
                  @click="makeTaskOrder(2, info.orderId)"
                >完成任务</van-button>
                <van-button
                  class="list-item__option-btn"
                  v-if="info.orderStatus == 2"
                  plain
                  type="info"
                  size="small"
                  @click="makeTaskOrder(3, info.orderId)"
                >开始任务</van-button>
                <van-button
                  class="list-item__option-btn"
                  v-if="info.orderStatus != 5"
                  type="info"
                  size="small"
                  @click="makeTaskOrder(4, info.orderId)"
                >放弃任务</van-button>
                <van-button
                  class="list-item__option-btn"
                  v-if="info.orderStatus == 5"
                  type="info"
                  size="small"
                  @click="makeTaskOrder(5, info.orderId)"
                >删除</van-button>
              </div>
            </li>
          </ul>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { cutTime } from "@/utils/filters.js";
const orderStatus = [
  {
    name: "全部",
    value: 0,
    key: 1
  },
  {
    name: "进行中",
    value: 1,
    key: 2
  },
  {
    name: "已完成",
    value: 5,
    key: 3
  }
];
const shopStatus = [
  {
    name: "全部",
    value: 0,
    key: 4
  },
  {
    name: "待支付",
    value: 1,
    key: 5
  },
  {
    name: "待收货",
    value: 2,
    key: 6
  },
  {
    name: "已完成",
    value: 3,
    key: 7
  },
  {
    name: "退款售后",
    value: 5,
    key: 8
  }
];
export default {
  data() {
    return {
      scrollHeight: "300px",
      tabIndex: 1,
      activeIndex: 0,
      orderStatus: "",
      pageNum: 1,
      optionKeys: {
        3: {
          title: '开始任务',
          desc: '确定开始任务吗？'
        },
        2: {
          title: '完成任务',
          desc: '确定完成任务吗？'
        },
        4: {
          title: '放弃任务',
          desc: '确定放弃任务吗？'
        },
        5: {
          title: '删除',
          desc: '确定删除任务吗？'
        }
      },
      orderStatusOptions: shopStatus,
      // statusDic: {
      //     0
      // },
      orderList: [],
      shopList: []
    };
  },
  created() {
    wx.getSystemInfo({
      success: res => {
        this.scrollHeight = res.windowHeight - 30 + "px";
        // this.setData({
        //     scrollHeight: res.windowHeight - 40 + 'px'
        // });
      }
    });
  },
  onShow() {
    const params = this.$getQuery();
    if (params.index && params.index == 2 || this.tabIndex == 2) {
      this.tabIndex = 2;
      this.getTaskList(this.orderStatus, 1);
    } else {
      this.getOrderList(this.orderStatus, 1);
    }
  },
  methods: {
    deleteOrder(orderId) {
      const _this = this;
      wx.showModal({
        title: "删除", //提示的标题,
        content: "确定删除？", //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#000000", //取消按钮的文字颜色,
        confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#3BB8FD", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            _this.$api.deleteOrder({ orderId }).then(res => {
              if (res.code == 0) {
                _this.getOrderList(this.orderStatus, 1);
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    //确认收货
    upDateFinishTime(orderId) {
      this.$api.upDateFinishTime({ orderId }).then(res => {
        if (res.code == 0) {
          this.getOrderList(this.orderStatus, 1);
        }
      });
    },
    scrollBottom() {
        let func = this.getTaskList;
        if (this.tabIndex === 1) {
            func = this.getOrderList;
        }
        this.$nextTick(() => {
            func(this.orderStatus, 1);
        });
    },
    changeTab(index) {
      this.orderStatusOptions = index === 1 ? shopStatus : orderStatus;
      this.activeIndex = 0;
      this.$nextTick(() => {
        if (index === 1) {
          this.getOrderList("", 1);
          this.tabIndex = index;
        } else {
          this.getTaskList("", 1);
          this.tabIndex = index;
        }
      });
    },
    routerTo(id) {
      wx.navigateTo({ url: "/pages/my/orderdetail/main?orderId=" + id });
    },
    goTaskDetail(item) {
      wx.navigateTo({ url: "/pages/order/taskDetail/main?id=" + item.orderId });
    },
    getOrderList(status = this.orderStatus, num = this.pageNum) {
        // var afterSale = false; //售后
        // if(status ==5){
        //     status = ''
        //     afterSale = true;
        // }
      this.$api
        .getOrderList({
          orderStatus: status,
          pageSize: 10,
          pageNum: num
        })
        .then(res => {
            if (num > 1) {
                this.orderList = this.orderList.concat(res.data.orderList);
            } else {
                this.orderList = res.data.orderList;
            }
            this.pageNum = num;
            this.orderStatus = status;
        });
    },
    getTaskList(status = this.orderStatus, num = this.pageNum) {
      this.$api
        .getTaskOrderList({
          status,
          pageSize: 10,
          pageNum: num
        })
        .then(res => {
          res.data.taskOrderList.forEach(item => {
            item.orderTime = cutTime(item.orderTime, "normal");
          });
          if (this.pageNum > 1) {
            this.shopList = this.shopList.concat(res.data.taskOrderList);
          } else {
            this.shopList = res.data.taskOrderList;
          }
          this.pageNum = num;
          this.orderStatus = status;
        });
    },
    tabChange(e) {
      let func = this.getTaskList;
      let value = 1;
      if (this.tabIndex === 1) {
        func = this.getOrderList;
        value = 0;
      }
      switch (e.target.index) {
        case 1:
          func(value, 1);
          break;
        case 2:
          func("2", 1);
          break;
        case 3:
          func("3", 1);
          break;
        case 4:
          func("5", 1);
          break;
        default:
          func("", 1);
      }
    },
    //1.接单2.完成 3.开始订单4.放弃订单
    makeTaskOrder(type, orderId) {
      const self = this;
      const obj = this.optionKeys[type];
      wx.showModal({
        title: obj.title, //提示的标题,
        content: obj.desc, //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#000000", //取消按钮的文字颜色,
        confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#3BB8FD", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            self.$api.makeTaskOrder({ orderId, type }).then(res => {
              if (res.code == 0) {
                self.getTaskList(self.orderStatus, 1);
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    goPay(item) {
      this.$api
        .toPay({
          orderId: item.orderId,
          payMode: 1
        })
        .then(res => {
          const payInfo = JSON.parse(res.data.payParams);
          wx.requestPayment({
            timeStamp: payInfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
            package: payInfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: payInfo.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: payInfo.paySign, // 支付签名
            success: function(res) {
              wx.showToast({
                title: "支付成功",
                icon: "none",
                mask: true,
                duration: 3000
              });
              this.getTaskList(this.orderStatus, 1);
            },
            cancel: function(res) {},
            fail: function(res) {
              wx.showToast({
                title: "支付失败，请重试",
                icon: "none",
                mask: true,
                duration: 3000
              });
            }
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  height: 100%;
}
.head-tab {
  margin: 0px 15px;
  height: 30px;
  display: flex;
  border: 1px solid $theme-color;
  color: $theme-color;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 2px;
  li {
    flex: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .tab-acitve {
    background: $theme-color;
    color: #fff;
  }
}
.list {
  background: $grey-bg;
  padding: 15px;
}
.list-item {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
}
.list-item__info {
  display: flex;
  align-items: center;
}
.item__info-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.item__info-order {
  flex: 1;
  height: 34px;
  margin: 0px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item__info-order__name {
  font-size: 13px;
  color: $color-text;
}
.item__info-order__price {
  color: $grey-color;
  font-size: 12px;
  span {
    color: $theme-color;
  }
}
.item__info-status {
  width: 52px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid $theme-color;
  color: $theme-color;
  border-radius: 10px;
  font-size: 12px;
}
.list-item__time {
  display: flex;
  align-items: center;
  color: $grey-color;
  font-size: 12px;
  padding: 10px 0px;
  border-bottom: 1px solid $grey-border-color;
}
.list-item__option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 16px;
}
.list-item__option-btn {
  margin-left: 13px;
  /deep/.van-button--info {
    border-color: $theme-color;
    background: $theme-color;
  }
  /deep/.van-button--plain {
    color: $theme-color;
    background: #fff;
  }
}
.commodity {
  border-top: 15px solid #f7f7f7;
  background: white;
  padding: 15px 20px;
  .status {
    text-align: right;
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(59, 184, 253, 1);
    line-height: 13px;
  }
  .content {
    padding: 15px 0;
    border-bottom: 1px solid #f7f7f7;
    img {
      width: 100px;
      height: 100px;
      border-radius: 4px;
    }
    .left {
      .title {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 24px;
      }
      .desc {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
      }
      .price {
        font-size: 15px;
        font-family: DIN;
        font-weight: 500;
        color: rgba(255, 156, 0, 1);
        line-height: 22px;
      }
      .num {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 21px;
      }
    }
  }
  .total {
    .piece {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 21px;
    }
    .heji {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 36px;
    }
    .price {
      font-size: 18px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 22px;
    }
  }
  .btns {
    text-align: right;
    button {
      width: 60px;
      height: 24px;
      line-height: 24px;
      border-radius: 5px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      padding: 0;
      display: inline-block;
    }
    .detail {
      color: rgba(193, 196, 201, 1);
      border: 0.5px solid #c1c4c9;
    }
    .pay {
      background: rgba(59, 184, 253, 1);
      color: rgba(255, 255, 255, 1);
      margin-left: 15px;
    }
  }
}
</style>
